<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <style>
    body {
      width: 200px;
      padding: 10px;
    }
    
    /* 开关样式 */
    .switch {
      position: relative;
      display: inline-block;
      width: 60px;
      height: 34px;
      margin-bottom: 15px;
    }
    
    .switch input {
      opacity: 0;
      width: 0;
      height: 0;
    }
    
    .slider {
      position: absolute;
      cursor: pointer;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: #ccc;
      transition: .4s;
      border-radius: 34px;
    }
    
    .slider:before {
      position: absolute;
      content: "";
      height: 26px;
      width: 26px;
      left: 4px;
      bottom: 4px;
      background-color: white;
      transition: .4s;
      border-radius: 50%;
    }
    
    input:checked + .slider {
      background-color: #4CAF50;
    }
    
    input:checked + .slider:before {
      transform: translateX(26px);
    }

    .switch-label {
      margin-left: 10px;
      line-height: 34px;
      vertical-align: top;
      display: inline-block;
      width: 120px;
    }
    
    .color-picker {
      margin-top: 10px;
    }
    
    label {
      display: block;
      margin-bottom: 5px;
    }
  </style>
</head>
<body>
  <div>
    <label class="switch">
      <input type="checkbox" id="toggleButton">
      <span class="slider"></span>
    </label>
    <span class="switch-label">护眼模式</span>
  </div>
  <div class="color-picker">
    <label>护眼颜色：</label>
    <input type="color" id="colorPicker" value="#c9e0c1">
    <input type="range" id="opacitySlider" min="0" max="100" value="30">
    <span id="opacityValue">30%</span>
  </div>
  <script src="popup.js"></script>
</body>
</html> 